<template>
  <div class="welcome">
    <div>
      {{ obj.a }}
      {{ obj.b }}
    </div>
    <el-button @click="changeValue">change</el-button>
	<el-button @click="changeValue1">change1</el-button>
  </div>
</template>

<script>
import test from "./test";
import test1 from "./test1";
export default {
  name: "welcome",
  components: { test, test1 },
  data() {
    return {
      searchText: "tests",
      component: "testc",
      obj: {
        a: 123,
      },
    };
  },
  mounted() {
	  console.log(this.obj);
  },
  methods: {
    show() {
      if (this.component === "test") {
        // this.searchText='test1'
        this.component = "test1";
      } else {
        // this.searchText='test'
        this.component = "test";
      }
    },
    changeValue() {
      
      console.log(this.obj);
	  this.obj.a=10
      this.obj.b = 20;
      console.log(this.obj);
    },
	changeValue1() {
		// this.obj.a=20
		this.obj.b=30
	}
  },
};
</script>

<style scoped lang="less">
.welcome {
  font-size: 36px;
  margin-top: 30%;
  margin-left: 40%;
  .test {
    color: pink;
  }
}
</style>
